<html>
  <head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
    	var datos = $.ajax({
    		url:'datosgrafica.php',
    		type:'post',
    		dataType:'json',
    		async:false    		
    	}).responseText;
    	
    	datos = JSON.parse(datos);
    	google.load("visualization", "1", {packages:["corechart"]});
      	google.setOnLoadCallback(dibujarGrafico);
      
      	function dibujarGrafico() {
        	var data = google.visualization.arrayToDataTable(datos);

        	var options = {
          	title: 'VALORES DE DATOS',
          	hAxis: {title: 'NOMBRE', titleTextStyle: {color: 'green'}},
          	vAxis: {title: 'CANTIDAD DE PAQUETES', titleTextStyle: {color: '#FF0000'}},
          	backgroundColor:'#ffffcc',
          	legend:{position: 'bottom', textStyle: {color: 'blue', fontSize: 13}},
          	is3D: true,
          	width:900,
            height:500
        	};

        	//var grafico = new google.visualization.ColumnChart(document.getElementById('grafica'));
        	//var grafico = new google.visualization.PieChart(document.getElementById('grafica'));
        	var grafico = new google.visualization.PieChart(document.getElementById('grafica'));
        	grafico.draw(data, options);
      	}
	</script>
  </head>
  <body>
    <div id="grafica"></div>
  </body>
</html>
